<template>
        <div class="wrap">
            <div class="logGet">
                <div class="head">
                    <span></span><img src="../images/logo.png" alt="">
                </div>
                <div class="form-body">
                    <div class="title">
                        <h1>| 合作商家后台</h1>
                    </div>
                    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"  size="mini">
                        <el-form-item label="用户名:" prop="mail">
                            <el-input v-model="ruleForm2.mail"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" prop="password">
                            <el-input type="password" v-model="ruleForm2.password" autocomplete="off" show-password></el-input>
                        </el-form-item>
                        <div class="forget"><a href="">忘记密码</a></div>
                        <el-form-item>
                            <el-button @click="submitForm('ruleForm2')">登录</el-button>
                            <el-button @click="register()">注册</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="footer">
                <hr>
                <div class="right">
                    Copyright© 2016-2019 by techi technology,All Rights Reserved
                </div>
            </div>
        </div>
</template>

<script>
import axios from 'axios'

import qs from 'qs'
    export default {
        data() {
            var checkId = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                }else if(this.ruleForm2.resvalue=='20001'){
                    callback(new Error('账号不存在'));
                }else if(this.ruleForm2.resvalue=='20003'){
                    callback(new Error('登录次数过多，请5分钟后再尝试'));
                }else{
                    callback();
                }
            };

            var validatePass = (rule, value, callback) => {
                // console.log(this.ruleForm2.resvalue);
                if (value === '') {
                    callback(new Error('请输入密码'));
                    } else if (this.ruleForm2.resvalue=='20002') {
                        callback(new Error('密码错误'));
                    }else if(this.ruleForm2.resvalue=='20003'){
                        callback(new Error('登录次数过多，请5分钟后再尝试'));
                    }else{
                        callback();
                    }     
            };

            return {
                ruleForm2: {
                    password: '',
                    mail: '',
                    resvalue:''
                },
                rules2: {
                    mail: [
                        { validator: checkId, trigger: 'submit' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'submit' }
                    ]
                },
                
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://192.168.1.198:8080/login', qs.stringify(this.ruleForm2)).then( res => {
                            console.log(res);
                            if(res.status == 200){
                                if(res.data.status == 'success'){
                                    alert('登录成功!');
                                    this.$router.push('/main');
                                }else{
                                    this.ruleForm2.resvalue= res.data.data.errorCode;
                                    this.$refs[formName].validate();
                                    this.ruleForm2.resvalue='';
                                }
                            }
                        }).catch(res => {
                            console.log(res);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            register() {
                this.$router.push('/register');
            } 
        }
    }
</script>

<style lang="scss" >
    *{
        margin: 0;
        padding: 0;
    }   

    .wrap{
        position: relative;
        height: 600px;
        display:flex;
        justify-content:center;//设置水平方向

        .logGet{
            height: 38px;
            width: 750px;
            // border: 1px solid black;
            position: relative;
            

            .head{
                height: 72px;
                width: 350px;
                // background-color: #ccc;
                margin:0 auto;
                margin-top: 100px;

                img{
                    height: 100%;
                }

                span{
                    display: inline-block;
                    width:40px;
                    height: 72px;
                }
            }

            .form-body{
                padding:35px;
                padding-bottom: 15px;
                margin: 20px auto;
                width: 330px;
                box-shadow: 0px 0px 25px 1px #999;
                
                .title{
                    font-size: 6px;
                }

                .el-button{
                    width: 100px;
                    background-color: #f1895c;
                    color: white;
                    border: none;
                }

                .el-form{
                    margin-top: 35px;
                    

                    .el-form-item__label{
                        width: 60px!important;
                        display: inline-block;
                        float: left;
                        padding-left:5px; 
                        overflow: hidden;
                        text-align: justify;
                        text-align-last: justify;
                        font-size: 11px;
                    }

                    .el-form-item__content{
                        margin-left: 60px!important;
                    }

                    .forget{
                        
                        font-size: 10px;
                        width: 100%;
                        text-align: right;
                        margin-bottom: 15px;
                        a:hover{
                            color: #f1895c;
                        }
                        a{  
                            color: rgb(161, 160, 160);
                            text-decoration:none;
                        }
                    }
                }
            }
            
        }

        .footer{
            position: absolute;
            bottom: 0px;
            width: 100%;
                 
            .right{
                text-align: center;
                font-size: 10px;
            }
        }

    }
</style>